<template>
  <div>
    <!--输入需求-->
    <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="需求：" class="el-col-8">
            <el-input v-model="formInline.demand" placeholder="请输入需求"></el-input>
          </el-form-item>
<!--          <el-form-item label="数据：" class="el-col-5">-->
<!--            <el-input v-model="formInline.oldData" placeholder="请输入原始数据"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="上传文件：" class="el-col-8">
            <el-upload
                      class="upload"
                       ref="upload"
                       action="string"
                       :file-list="fileList"
                       :on-change="handleChange"
                       :auto-upload="false"
                      :limit="1"
                       multiple="multiple">
            <el-button
                      slot="trigger"
                       size="small"
                       type="primary"
                       @click="delFile">选取文件</el-button>
            </el-upload>

          </el-form-item>
          <el-form-item class="el-col-3">
            <el-button type="primary" @click="getBiData">提交</el-button>
          </el-form-item>
        </el-form>
  </el-card>
    <!--显示图表-->
    <el-card>
        <el-col class="el-col-12">
          <el-header>{{formInline.demand}}</el-header>
          <Echarts :option="option" style="height: 400px;width: 630px" />
        </el-col>
      <el-col class="el-col-12">
        <h4>{{analysis}}</h4>
      </el-col>
    </el-card>
  </div>
</template>

<script>

import Echarts from '@/components/Echarts/Echarts.vue'
import axios from 'axios'
export default {
  components: { Echarts },
  data() {
    return {
      formLabelWidth: '100px',
      formInline: {
        demand: '',
        formData: ''
      },
      option: {

      },
      analysis: '',
      fileList: [],
      multiple: false
    }
  },
  methods: {
    clearForm() {
      this.form = {}
      this.$refs.activityFormRef.clearValidate()
      this.formUser = {}
    },
    getBiData() {
      const formData = new FormData()
      formData.append('file', this.fileList[0].raw)
      formData.append('demand', this.formInline.demand)
      if (this.fileList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请提交文件'
        })
        console.log('未上传文件')
        return
      }
      axios.post('http://101.201.64.236:9999/prod-api/bi/message', formData, {
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8'
        }
      }).then(res => {
        // console.log(res)
        //  this.option = res.data.data.option
        const aaa = res.data.data.option
        // eslint-disable-next-line no-new-object
        this.option = JSON.parse(aaa)
        this.analysis = res.data.data.analysis
        console.log(this.analysis)
        console.log(this.option)
        if (res.data.code === 20000) {
          // 成功提示
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '请再次提交',
            type: 'warning'
          })
        }
      })
      // biApi.getAiResponse(this.formInline).then(resp => {
      //   this.option = resp.data.option
      //   this.analysis = resp.data.analysis
      // })
      // console.log('submit!')
    },
    // 点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = []
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    // 点击文件
    handlePreview(file) {
      console.log(file)
    }
  }
}
</script>

<style>
.el-input {
  width: 250px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}
</style>
